<template>
  <div class="main">
    <div class="topbar">
      <div class="back" @click="goBack()">
        <van-icon name="arrow-left" size="26px" />
      </div>
      <div class="text">注册</div>
    </div>
    <div class="img">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-douban"></use>
      </svg>
    </div>
    <div class="form">
      <van-cell-group>
        <van-field
          v-model="username"
          label="用户名"
          placeholder="请输入用户名"
        />
        <van-field
          v-model="password"
          type="password"
          label="密码"
          placeholder="请输入密码"
        />
      </van-cell-group>
      <van-button type="primary" round @click="register">注册并登录</van-button>
    </div>
    <div class="login" @click="togo()">已有账号？点击立即登录！</div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { axios2 } from "../../request/api";
import { onMounted } from "@vue/runtime-core";
import { Toast } from "vant";
export default {
  name: "Register",
  setup() {
    let data = reactive({
      users: [],
      username: "",
      password: "",
    });
    const router = useRouter();
    const goBack = () => {
      router.back();
    };
    const togo = () => {
      router.replace("/login");
    };
    // 先请求后端所有的users数据
    const getUsers = () => axios2.get("/users");
    const getUsers2 = async () => {
      const res = await getUsers();
      console.log(res.data);
      data.users = res.data;
    };
    onMounted(() => {
      getUsers2();
    });
    // 注册逻辑:先检测用户名是否存在，不存在再发送到后端
    const register = () => {
      let user;
      // console.log(
      //   data.users.some((item) => {
      //     return item.username == data.username;
      //   })
      // );
      if (
        //验证用户名
        data.users.some((item) => {
          return item.username == data.username;
        })
      ) {
        Toast("用户名已被注册！");
      } else {
        // 将数据发送给后端
        const sendUser = () => {
          axios2({
            method: "POST",
            url: "/users",
            data: {
              username: data.username,
              password: data.password,
              // 初始化评分
              "userrate": [
                {
                    "hotmovie": [
                        {
                            "id": 1,
                            "rate": 0
                        },
                        {
                            "id": 2,
                            "rate": 0
                        },
                        {
                            "id": 3,
                            "rate": 0
                        },
                        {
                            "id": 4,
                            "rate": 0
                        },
                        {
                            "id": 5,
                            "rate": 0
                        },
                        {
                            "id": 6,
                            "rate": 0
                        },
                        {
                            "id": 7,
                            "rate": 0
                        },
                        {
                            "id": 8,
                            "rate": 0
                        },
                        {
                            "id": 9,
                            "rate": 0
                        },
                        {
                            "id": 10,
                            "rate": 0
                        }
                    ]
                },
                {
                    "hotmovie2": [
                        {
                            "id": 1,
                            "rate": 0
                        },
                        {
                            "id": 2,
                            "rate": 0
                        },
                        {
                            "id": 3,
                            "rate": 0
                        },
                        {
                            "id": 4,
                            "rate": 0
                        },
                        {
                            "id": 5,
                            "rate": 0
                        }
                    ]
                }
            ]
            },
          }).then((response) => {
            console.log(response.data);
            localStorage.setItem("user", JSON.stringify(response.data));
            router.replace('/movielist')
          });
        };
        sendUser();
        Toast("注册成功！");
      }
    };
    return {
      goBack,
      togo,
      ...toRefs(data),
      register,
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  min-height: 900px;
  background: linear-gradient(
    to right,
    rgba(9, 102, 48, 0.719),
    rgba(79, 201, 130, 0.719)
  );
  .topbar {
    height: 39px;
    box-shadow: 0 1px 2px #888;
    padding-top: 11px;
    background-color: rgb(255, 255, 255);
    display: flex;
    .text {
      margin-left: 150px;
      color: rgb(12, 136, 43);
      font-weight: 600;
    }
  }
  .img {
    width: 250px;
    height: 250px;
    background-color: rgba(52, 167, 100, 0.719);
    border-radius: 50px;
    margin: 50px auto;
    .icon {
      width: 250px;
      height: 250px;
    }
  }
  .form {
    width: 360px;
    height: 150px;
    margin: 40px auto;
    position: relative;
    .van-cell-group {
      border-radius: 20px;
    }
    .van-button {
      width: 200px;
      position: absolute;
      left: 50%;
      margin-left: -100px;
      margin-top: 20px;
      background-color: rgba(25, 121, 65, 0.993);
      border: 0;
    }
  }
  .login {
    font-size: 18px;
    float: right;
    color: rgba(255, 255, 255, 0.678);
    margin-right: 2px;
  }
}
</style>